<template>
  <div>
    <div v-if="showbutton"><el-button @click="submit()"> 填报</el-button></div>
    <table style="width: 100%" border="1" cellspacing="1">
      <tbody>
        <tr>
          <td colspan="1">俱乐部名称</td>
          <td colspan="4"><input type="text" v-model="dataform.orgName" /></td>
          <td colspan="2">主管单位</td>
          <td colspan="2">
            <input type="text" v-model="dataform.masterOrgName" />
          </td>
        </tr>
        <tr>
          <td colspan="1">网站选址</td>
          <td colspan="4">
            <input type="text" v-model="dataform.intAddress" />
          </td>
          <td colspan="2">成立时间</td>
          <td colspan="2"><input type="text" v-model="dataform.upTime" /></td>
        </tr>
        <tr>
          <td colspan="1">通讯地址</td>
          <td colspan="4">
            <input type="text" v-model="dataform.phoneAddress" />
          </td>
          <td colspan="2">邮政编码</td>
          <td colspan="2"><input type="text" v-model="dataform.postcode" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">俱乐部类型(划“√”)</td>
          <td colspan="2">民办非企业</td>
          <td colspan="2">企业法人</td>
          <td colspan="2">社会团体</td>
          <td colspan="2">其他</td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="text" v-model="clubTypeid.civilianrun" />
          </td>
          <td colspan="2"><input type="text" v-model="clubTypeid.firm" /></td>
          <td colspan="2">
            <input type="text" v-model="clubTypeid.society" />
          </td>
          <td colspan="2"><input type="text" v-model="clubTypeid.other" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="7">负责人</td>
          <td colspan="1" rowspan="5">总负责人</td>
          <td colspan="2">姓名</td>
          <td colspan="2">
            <input type="text" v-model="dataform.allResponsibleName" />
          </td>
          <td colspan="1">固定电话</td>
          <td colspan="2">
            <input type="text" v-model="dataform.allResponsibleStaticPhone" />
          </td>
        </tr>
        <tr>
          <td colspan="3" rowspan="4">身份选项(请在相应的选项后划“√”)</td>
          <td colspan="1">法人代表</td>
          <td colspan="2">
            <input type="text" v-model="allResponsibleJobTypeid.LegalPerson" />
          </td>
        </tr>
        <tr>
          <td colspan="1">理事长</td>
          <td colspan="2">
            <input
              type="text"
              v-model="allResponsibleJobTypeid.Presidentofacouncil"
            />
          </td>
        </tr>
        <tr>
          <td colspan="1">校长</td>
          <td colspan="2">
            <input type="text" v-model="allResponsibleJobTypeid.rector" />
          </td>
        </tr>
        <tr>
          <td colspan="1">其他</td>
          <td colspan="2">
            <input type="text" v-model="allResponsibleJobTypeid.other" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">日常负责人</td>
          <td colspan="2">姓名</td>
          <td colspan="1">
            <input type="text" v-model="dataform.dayResponsibleName" />
          </td>
          <td colspan="1">固定电话</td>
          <td colspan="2">
            <input type="text" v-model="dataform.dayResponsibleStaticPhone" />
          </td>
        </tr>
        <tr>
          <td colspan="2">手机</td>
          <td colspan="1">
            <input type="text" v-model="dataform.dayResponsiblePhone" />
          </td>
          <td colspan="1">电子邮箱</td>
          <td colspan="2">
            <input type="text" v-model="dataform.dayResponsibleEmail" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">依托单位</td>
          <td colspan="2">单位名称</td>
          <td colspan="5">
            <input type="text" v-model="dataform.dependOrgName" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">单位性质(划“√”)</td>
          <td colspan="1">普通学校</td>
          <td colspan="2">
            <input type="text" v-model="dependOrgTypeid.Ordinaryschool" />
          </td>
          <td colspan="1">场馆、活动中心</td>
          <td colspan="2">
            <input type="text" v-model="dependOrgTypeid.Sportsschool" />
          </td>
        </tr>
        <tr>
          <td colspan="1">体育运动学校</td>
          <td colspan="2">
            <input
              type="text"
              v-model="dependOrgTypeid.Traditionalprojectschool"
            />
          </td>
          <td colspan="1">企业、公司</td>
          <td colspan="2">
            <input type="text" v-model="dependOrgTypeid.venue" />
          </td>
        </tr>
        <tr>
          <td colspan="1">传统项目学校</td>
          <td colspan="2">
            <input type="text" v-model="dependOrgTypeid.firm" />
          </td>
          <td colspan="1">协会、社团</td>
          <td colspan="2">
            <input type="text" v-model="dependOrgTypeid.association" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">管理人员数量</td>
          <td colspan="1">在编</td>
          <td colspan="1">聘用</td>
          <td colspan="3" rowspan="2">营业场地面积(㎡)</td>
          <td colspan="2" rowspan="2">
            <input type="text" v-model="dataform.acreage" />
          </td>
        </tr>
        <tr>
          <td colspan="1">
            <input type="text" v-model="dataform.managementOnNum" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.managementOutNum" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">所获级别命名授予时间(年份)</td>
          <td colspan="4">国家级青少年俱乐部</td>
          <td colspan="3">
            <input type="text" v-model="dataform.getNationYear" />
          </td>
        </tr>
        <tr>
          <td colspan="4">省级青少年俱乐部</td>
          <td colspan="3">
            <input type="text" v-model="dataform.getProvinceYear" />
          </td>
        </tr>
        <tr>
          <td colspan="4">地市级青少年俱乐部</td>
          <td colspan="3">
            <input type="text" v-model="dataform.getCityYear" />
          </td>
        </tr>
        <tr>
          <td colspan="4">县级青少年俱乐部</td>
          <td colspan="3">
            <input type="text" v-model="dataform.getCountyYear" />
          </td>
        </tr>
        <tr>
          <td colspan="2">年均举办活动(或培训)次数</td>
          <td colspan="2">
            <input type="text" v-model="dataform.yearActivityNum" />
          </td>
          <td colspan="2">年均参加人数</td>
          <td colspan="2">
            <input type="text" v-model="dataform.yearJoinPeopleNum" />
          </td>
        </tr>
        <tr>
          <td
            colspan="1"
            rowspan="6"
            @contextmenu.prevent="showProjectContextMenu($event, 0)"
            style="cursor: pointer"
          >
            <el-tooltip
              content="右键点击可以新增项目"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <div>
                项目1
                <i
                  class="el-icon-info"
                  style="color: #909399; margin-left: 2px; font-size: 12px;"
                ></i>
              </div>
            </el-tooltip>
          </td>
          <td colspan="3">项目名称</td>
          <td colspan="4">
            <input type="text" v-model="dataform.fSheet4bList[0].sportName" />
          </td>
        </tr>
        <tr>
          <td colspan="3" rowspan="2">在训青少年数量</td>
          <td colspan="2">二级以上(含)</td>
          <td colspan="2">其他</td>
        </tr>
        <tr>
          <td colspan="2">
            <input
              type="text"
              v-model="dataform.fSheet4bList[0].teenagerSecondLevelNum"
            />
          </td>
          <td colspan="2">
            <input
              type="text"
              v-model="dataform.fSheet4bList[0].teenagerOtherNum"
            />
          </td>
        </tr>
        <tr>
          <td colspan="3" rowspan="2">聘教练员数量</td>
          <td colspan="2">高级以上(含)</td>
          <td colspan="2">初级、中级</td>
        </tr>
        <tr>
          <td colspan="2">
            <input
              type="text"
              v-model="dataform.fSheet4bList[0].coachHighLevelNum"
            />
          </td>
          <td colspan="2">
            <input
              type="text"
              v-model="dataform.fSheet4bList[0].coachEarlyCentreLevelNum"
            />
          </td>
        </tr>
        <tr>
          <td colspan="3">聘请指导教师数量</td>
          <td colspan="4">
            <input type="text" v-model="dataform.fSheet4bList[0].teacherNum" />
          </td>
        </tr>
        <template v-for="(item, index) in dataform.fSheet4bList.slice(1)">
          <tr>
            <td
              colspan="1"
              rowspan="6"
              @contextmenu.prevent="showProjectContextMenu($event, index + 1)"
              style="cursor: pointer"
            >
              <el-tooltip
                content="右键点击可以新增项目"
                placement="top"
                effect="light"
                :open-delay="500"
              >
                <div>
                  项目{{ index + 2 }}
                  <i
                    class="el-icon-info"
                    style="color: #909399; margin-left: 2px; font-size: 12px;"
                  ></i>
                </div>
              </el-tooltip>
            </td>
            <td colspan="3">项目名称</td>
            <td colspan="4"><input type="text" v-model="item.sportName" /></td>
          </tr>
          <tr>
            <td colspan="3" rowspan="2">在训青少年数量</td>
            <td colspan="2">二级以上(含)</td>
            <td colspan="2">其他</td>
          </tr>
          <tr>
            <td colspan="2">
              <input type="text" v-model="item.teenagerSecondLevelNum" />
            </td>
            <td colspan="2">
              <input type="text" v-model="item.teenagerOtherNum" />
            </td>
          </tr>
          <tr>
            <td colspan="3" rowspan="2">聘请教练员数量</td>
            <td colspan="2">高级以上(含)</td>
            <td colspan="2">初级、中级</td>
          </tr>
          <tr>
            <td colspan="2">
              <input type="text" v-model="item.coachHighLevelNum" />
            </td>
            <td colspan="2">
              <input type="text" v-model="item.coachEarlyCentreLevelNum" />
            </td>
          </tr>
          <tr>
            <td colspan="3">聘请指导教师数量</td>
            <td colspan="4"><input type="text" v-model="item.teacherNum" /></td>
          </tr>
        </template>
        <tr>
          <td colspan="1" rowspan="10">输送情况</td>
          <td colspan="3">走向种类</td>
          <td colspan="2">以往年度累计人数</td>
          <td colspan="3">上一年度人数</td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">体育系统输送</td>
          <td colspan="2">省队(一线)</td>
          <td colspan="2">
            <input type="text" v-model="dataform.oneLineAllNum" />
          </td>
          <td colspan="3">
            <input type="text" v-model="dataform.oneLineUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2">省级体校(二线)</td>
          <td colspan="2">
            <input type="text" v-model="dataform.twoLineAllNum" />
          </td>
          <td colspan="3">
            <input type="text" v-model="dataform.twoLineUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2">市级体校(三线)</td>
          <td colspan="2">
            <input type="text" v-model="dataform.threeLineAllNum" />
          </td>
          <td colspan="3">
            <input type="text" v-model="dataform.threeLineUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">教育系统输送</td>
          <td colspan="2">体育院校</td>
          <td colspan="2">
            <input type="text" v-model="dataform.sportSchoolAllNum" />
          </td>
          <td colspan="3">
            <input type="text" v-model="dataform.sportSchoolUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2">普通院校</td>
          <td colspan="2">
            <input type="text" v-model="dataform.commonSchoolAllNum" />
          </td>
          <td colspan="3">
            <input type="text" v-model="dataform.commonSchoolUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2">高校高水平运动队</td>
          <td colspan="2">
            <input type="text" v-model="dataform.highSchoolAllNum" />
          </td>
          <td colspan="3">
            <input type="text" v-model="dataform.highSchoolUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="3">部队体工队</td>
          <td colspan="2">
            <input type="text" v-model="dataform.troopSchoolAllNum" />
          </td>
          <td colspan="3">
            <input type="text" v-model="dataform.troopSchoolUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="3">就业</td>
          <td colspan="2">
            <input type="text" v-model="dataform.jobSchoolAllNum" />
          </td>
          <td colspan="3">
            <input type="text" v-model="dataform.jobSchoolUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="3">其他</td>
          <td colspan="2">
            <input type="text" v-model="dataform.otherSchoolAllNum" />
          </td>
          <td colspan="3">
            <input type="text" v-model="dataform.otherSchoolUpNum" />
          </td>
        </tr>
        <tr>
          <td
            colspan="1"
            :rowspan="
              12 +
                additionalNationalRows +
                additionalProvincialRows +
                additionalOtherRows -
                9
            "
          >
            参加的活动和获得的荣誉与奖励(自2011年起)
          </td>
          <td colspan="1" :rowspan="1 + additionalNationalRows">全国性</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <!-- 全国性活动 -->
        <tr
          v-for="(item, index) in dataform.fSheet4dList.filter(
            item => item.joinActivityTypeId === 1
          )"
          :key="`national-${index}`"
        >
          <td colspan="1">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="item.joinTime"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index, 'national')
                "
              />
            </el-tooltip>
          </td>
          <td colspan="6">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="item.result"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index, 'national')
                "
              />
            </el-tooltip>
          </td>
        </tr>
        <tr>
          <td colspan="1" :rowspan="1 + additionalProvincialRows">省市级</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <!-- 省市级活动 -->
        <tr
          v-for="(item, index) in dataform.fSheet4dList.filter(
            item => item.joinActivityTypeId === 2
          )"
          :key="`provincial-${index}`"
        >
          <td colspan="1">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="item.joinTime"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index, 'provincial')
                "
              />
            </el-tooltip>
          </td>
          <td colspan="6">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="item.result"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index, 'provincial')
                "
              />
            </el-tooltip>
          </td>
        </tr>
        <tr>
          <td colspan="1" :rowspan="1 + additionalOtherRows">其他活动</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <!-- 其他活动 -->
        <tr
          v-for="(item, index) in dataform.fSheet4dList.filter(
            item => item.joinActivityTypeId === 3
          )"
          :key="`other-${index}`"
        >
          <td colspan="1">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="item.joinTime"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index, 'other')
                "
              />
            </el-tooltip>
          </td>
          <td colspan="6">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="item.result"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index, 'other')
                "
              />
            </el-tooltip>
          </td>
        </tr>
        <tr>
          <td colspan="1">备注</td>
          <td colspan="8"></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">单位简介</td>
          <td colspan="8" style="height: 60px;"></td>
        </tr>
      </tbody>
    </table>
    <div style="display: flex; justify-content: space-between;">
      <div>填表人：<input type="text" v-model="dataform.writePeople" /></div>
      <div>联系电话：<input type="text" v-model="dataform.writePhone" /></div>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <div>填报时间：<input type="text" v-model="dataform.writeTime" /></div>
      <div>填报单位：<input type="text" v-model="dataform.orgName" /></div>
    </div>
    <div v-show="showMenu" :style="menuStyle" class="context-menu">
      <div
        v-if="currentSection === 'project'"
        @click="addRow"
        class="menu-item"
      >
        新增一个项目
      </div>
      <div
        v-if="currentSection === 'project'"
        @click="deleteRow"
        class="menu-item"
      >
        删除这个项目
      </div>
      <div
        v-if="currentSection === 'activity'"
        @click="addRow"
        class="menu-item"
      >
        新增一行
      </div>
      <div
        v-if="currentSection === 'activity'"
        @click="deleteRow"
        class="menu-item"
      >
        删除这行
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import { insert_update_sheet4 } from "@/api/statistics.js";
export default {
  props: {
    Alldata: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      showbutton: true,
      dataform: {
        orgName: "",
        masterOrgName: "",
        intAddress: "",
        upTime: "",
        phoneAddress: "",
        postcode: "",
        clubType: "",
        socialOrg: "",
        allResponsibleName: "",
        allResponsibleStaticPhone: "",
        allResponsibleJobType: "",
        dayResponsibleName: "",
        dayResponsiblePhone: "",
        dayResponsibleStaticPhone: "",
        dayResponsibleEmail: "",
        dependOrgName: "",
        dependOrgType: "",
        managementOnNum: "",
        managementOutNum: "",
        acreage: "",
        getNationYear: "",
        getProvinceYear: "",
        getCityYear: "",
        getCountyYear: "",
        yearActivityNum: "",
        yearJoinPeopleNum: "",
        memo: "",
        info: "",
        writePeople: "",
        writeTime: "",
        writePhone: "",
        fSheet4bList: [
          {
            sportName: "",
            teenagerSecondLevelNum: "",
            teenagerOtherNum: "",
            coachHighLevelNum: "",
            coachEarlyCentreLevelNum: "",
            teacherNum: ""
          },
          {
            sportName: "",
            teenagerSecondLevelNum: "",
            teenagerOtherNum: "",
            coachHighLevelNum: "",
            coachEarlyCentreLevelNum: "",
            teacherNum: ""
          },
          {
            sportName: "",
            teenagerSecondLevelNum: "",
            teenagerOtherNum: "",
            coachHighLevelNum: "",
            coachEarlyCentreLevelNum: "",
            teacherNum: ""
          },
          {
            sportName: "",
            teenagerSecondLevelNum: "",
            teenagerOtherNum: "",
            coachHighLevelNum: "",
            coachEarlyCentreLevelNum: "",
            teacherNum: ""
          }
        ],
        oneLineAllNum: "",
        oneLineUpNum: "",
        twoLineAllNum: "",
        twoLineUpNum: "",
        threeLineAllNum: "",
        threeLineUpNum: "",
        sportSchoolAllNum: "",
        sportSchoolUpNum: "",
        commonSchoolAllNum: "",
        commonSchoolUpNum: "",
        highSchoolAllNum: "",
        highSchoolUpNum: "",
        troopSchoolAllNum: "",
        troopSchoolUpNum: "",
        jobSchoolAllNum: "",
        jobSchoolUpNum: "",
        otherSchoolAllNum: "",
        otherSchoolUpNum: "",
        fSheet4dList: [
          // 全国性活动 (joinActivityTypeId: 1)
          {
            joinActivityTypeId: 1,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 1,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 1,
            joinTime: "",
            result: ""
          },
          // 省市级活 (joinActivityTypeId: 2)
          {
            joinActivityTypeId: 2,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 2,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 2,
            joinTime: "",
            result: ""
          },
          // 其他活动 (joinActivityTypeId: 3)
          {
            joinActivityTypeId: 3,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 3,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 3,
            joinTime: "",
            result: ""
          }
        ]
      },
      // //俱乐部类型 clubType 1民办 2企业 3社会团体 4其他
      clubTypeid: {
        civilianrun: "", //民办
        firm: "", //企业
        society: "", //社会团体
        other: "" //其他
      },
      //总负责人身份 1法人 2理事长 3校长 4其他 allResponsibleJobType
      allResponsibleJobTypeid: {
        LegalPerson: "", //法人
        Presidentofacouncil: "", //理事长
        rector: "", //校长
        other: "" //其他
      },

      //依托单位性质  1普通学校 2体育运动学校 3传统项目学校 4场馆，活动中心 5企业，公司  6协会，社团  dependOrgType
      dependOrgTypeid: {
        Ordinaryschool: "",
        Sportsschool: "",
        Traditionalprojectschool: "",
        venue: "",
        firm: "",
        association: ""
      },
      showMenu: false,
      menuStyle: {
        left: "0px",
        top: "0px"
      },
      currentSection: "",
      currentRowIndex: -1,
      currentActivityType: "" // 用于标识当前操作的活动类型（national/provincial/other）
    };
  },

  //更新数据
  watch: {
    Alldata(newValue, oldValue) {
      // console.log(1111111111111);
      this.dataform = newValue;
      // //俱乐部类型 clubType 1民办 2企业 3社会团体 4其他
      if (this.dataform.clubType == 1) {
        this.clubTypeid.civilianrun = "√";
      } else if (this.dataform.clubType == 2) {
        this.clubTypeid.firm = "√";
      } else if (this.dataform.clubType == 3) {
        this.clubTypeid.society = "√";
      } else if (this.dataform.clubType == 4) {
        this.clubTypeid.other = "√";
      }

      //总负责人身份 1法人 2理事长 3校长 4其他 allResponsibleJobType

      if (this.dataform.allResponsibleJobType == 1) {
        this.allResponsibleJobTypeid.LegalPerson = "√";
      } else if (this.dataform.allResponsibleJobType == 2) {
        this.allResponsibleJobTypeid.Presidentofacouncil = "√";
      } else if (this.dataform.allResponsibleJobType == 3) {
        this.allResponsibleJobTypeid.rector = "√";
      } else if (this.dataform.allResponsibleJobType == 4) {
        this.allResponsibleJobTypeid.other = "√";
      }

      //依托单位性质  1普通学校 2体育运动学校 3传统项目学校 4场馆，活动中心 5企业，公司  6协会，社团  dependOrgType

      if (this.dataform.dependOrgType == 1) {
        this.dependOrgTypeid.Ordinaryschool = "√";
      } else if (this.dataform.dependOrgType == 2) {
        this.dependOrgTypeid.Sportsschool = "√";
      } else if (this.dataform.dependOrgType == 3) {
        this.dependOrgTypeid.Traditionalprojectschool = "√";
      } else if (this.dataform.dependOrgType == 4) {
        this.dependOrgTypeid.venue = "√";
      } else if (this.dataform.dependOrgType == 5) {
        this.dependOrgTypeid.firm = "√";
      } else if (this.dataform.dependOrgType == 6) {
        this.dependOrgTypeid.association = "√";
      }
    }
    // dataform(newValue, oldValue) {
    //   this.dataform = newValue
    // },
  },

  methods: {
    showbuut() {
      this.showbutton = false;
    },

    submit() {
      // //俱乐部类型 clubType 1民办 2企业 3社会团体 4其他
      if (this.clubTypeid.civilianrun) {
        this.dataform.clubType = 1;
      } else if (this.clubTypeid.firm) {
        this.dataform.clubType = 2;
      } else if (this.clubTypeid.society) {
        this.dataform.clubType = 3;
      } else if (this.clubTypeid.other) {
        this.dataform.clubType = 4;
      }
      //总负责人身份 1法人 2理事长 3校长 4其他 allResponsibleJobType

      if (this.allResponsibleJobTypeid.LegalPerson) {
        this.dataform.allResponsibleJobType = 1;
      } else if (this.allResponsibleJobTypeid.Presidentofacouncil) {
        this.dataform.allResponsibleJobType = 2;
      } else if (this.allResponsibleJobTypeid.rector) {
        this.dataform.allResponsibleJobType = 3;
      } else if (this.allResponsibleJobTypeid.other) {
        this.dataform.allResponsibleJobType = 4;
      }

      //依托单位性质  1普通学校 2体育运动学校 3传统项目学校 4场馆，活动中心 5企业，公司  6协会，社团  dependOrgType

      if (this.dependOrgTypeid.Ordinaryschool) {
        this.dataform.dependOrgType = 1;
      } else if (this.dependOrgTypeid.Sportsschool) {
        this.dataform.dependOrgType = 2;
      } else if (this.dependOrgTypeid.Traditionalprojectschool) {
        this.dataform.dependOrgType = 3;
      } else if (this.dependOrgTypeid.venue) {
        this.dataform.dependOrgType = 4;
      } else if (this.dependOrgTypeid.firm) {
        this.dataform.dependOrgType = 5;
      } else if (this.dependOrgTypeid.association) {
        this.dataform.dependOrgType = 6;
      }

      // console.log(qs.stringify(this.dataform));
      insert_update_sheet4(this.dataform).then(res => {
        this.$message.success("填报成功");
      });
    },

    showProjectContextMenu(event, index) {
      // 许在任何项目上右键
      this.showMenu = true;
      this.currentSection = "project";
      this.currentRowIndex = index;
      this.menuStyle = {
        left: event.clientX + "px",
        top: event.clientY + "px"
      };
    },

    addRow() {
      if (this.currentSection === "project") {
        // 项目添加逻辑
        const newProject = {
          sportName: "",
          teenagerSecondLevelNum: "",
          teenagerOtherNum: "",
          coachHighLevelNum: "",
          coachEarlyCentreLevelNum: "",
          teacherNum: ""
        };
        this.dataform.fSheet4bList.push(newProject);
      } else if (this.currentSection === "activity") {
        const newActivity = {
          joinActivityTypeId:
            this.currentActivityType === "national"
              ? 1
              : this.currentActivityType === "provincial"
              ? 2
              : 3,
          joinTime: "",
          result: ""
        };

        // 根据不同类型在不同位置插入
        let insertIndex =
          this.currentActivityType === "national"
            ? 3
            : this.currentActivityType === "provincial"
            ? 6
            : 9;

        this.dataform.fSheet4dList.splice(insertIndex, 0, newActivity);
      }
      this.hideContextMenu();
    },

    deleteRow() {
      if (this.currentSection === "project") {
        // 项目删除逻辑
        if (this.dataform.fSheet4bList.length > 2) {
          this.dataform.fSheet4bList.splice(this.currentRowIndex, 1);
        }
      } else if (this.currentSection === "activity") {
        // 活动删除逻辑
        const currentTypeId =
          this.currentActivityType === "national"
            ? 1
            : this.currentActivityType === "provincial"
            ? 2
            : 3;

        // 获取当前类型的所有活动
        const currentTypeActivities = this.dataform.fSheet4dList.filter(
          item => item.joinActivityTypeId === currentTypeId
        );

        // 确保至少保留一行
        if (currentTypeActivities.length > 1) {
          // 找到要删除的活动在整个数组中的索引
          const indexToDelete = this.dataform.fSheet4dList.findIndex(
            item => item === currentTypeActivities[this.currentRowIndex]
          );

          if (indexToDelete !== -1) {
            this.dataform.fSheet4dList.splice(indexToDelete, 1);
          }
        }
      }
      this.hideContextMenu();
    },

    hideContextMenu() {
      this.showMenu = false;
    },

    showActivityContextMenu(event, index, type) {
      this.showMenu = true;
      this.currentSection = "activity";
      this.currentActivityType = type;
      this.currentRowIndex = index;
      this.menuStyle = {
        left: event.clientX + "px",
        top: event.clientY + "px"
      };
    }
  },

  mounted() {
    document.addEventListener("click", this.hideContextMenu);
  },

  beforeDestroy() {
    document.removeEventListener("click", this.hideContextMenu);
  },
  computed: {
    additionalNationalRows() {
      return this.dataform.fSheet4dList.filter(
        item => item.joinActivityTypeId === 1
      ).length;
    },
    additionalProvincialRows() {
      return this.dataform.fSheet4dList.filter(
        item => item.joinActivityTypeId === 2
      ).length;
    },
    additionalOtherRows() {
      return this.dataform.fSheet4dList.filter(
        item => item.joinActivityTypeId === 3
      ).length;
    }
  }
};
</script>

<style>
table {
  border-collapse: collapse;
  /* //合并为一个单一的边框 */
  border-color: #a2a7ab;
  /* //边框颜色按实际自定义即可 */
  margin-bottom: 10px;
}

thead tr th {
  background-color: #f8f8f9;
  /* //设置表格标题背景色 */
  padding: 3px;
  text-align: center;
}

tbody tr td {
  padding: 3px;
  text-align: center;
  height: 34px;
  /* //设置单元格最小高度 */
}
tbody tr td input {
  width: 99%;
  height: 95%;
  text-align: center;
  border: none;
}

.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 0;
  min-width: 120px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

.menu-item {
  padding: 8px 16px;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #f5f7fa;
}
</style>
